import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'

@Component({
  selector: 'ad-dialog-title',
  template: `
    <div mat-dialog-title [class.ad-dialog-show-border]="showBorder">
      <!-- 文本 -->
      <span
        class="ad-dialog-title-text"
        [style.minWidth]="titleNameWidth ? titleNameWidth + 'px' : 'auto'"
        [style.maxWidth]="titleNameWidth ? titleNameWidth + 'px' : 'auto'"
      >
        <ng-content></ng-content>
      </span>

      <!-- 中心区域 -->
      <ng-content select=".mat-dialog-title-center"></ng-content>

      <!-- 操作按钮区域 -->
      <div
        class="ad-dialog-actions-container"
        [style.minWidth]="actionContainerWidth ? actionContainerWidth + 'px' : 'auto'"
        [style.maxWidth]="actionContainerWidth ? actionContainerWidth + 'px' : 'auto'"
        [style.marginRight]="actionContainerTranslateX + 'px'"
      >
        <ng-content select=".mat-dialog-title-action"></ng-content>
        <ng-container *ngIf="showCloseIcon">
          <button
            class="mat-dialog-title-action"
            mat-icon-button
            mat-dialog-close
            *ngIf="!closeHandle.observers.length; else closeHandleTemplate"
          >
            <span class="ti-close"></span>
          </button>
        </ng-container>
      </div>
    </div>
    <!-- 父组件监听close事件后使用该模板 -->
    <ng-template #closeHandleTemplate>
      <button mat-icon-button (click)="closeHandle.emit()">
        <span class="ti-close"></span>
      </button>
    </ng-template>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    class: 'ad-dialog-title',
  },
})
export class AdDialogTitle {
  /* close按钮点击事件 父组件监听后不会自动关闭dialog */
  @Output()
  closeHandle: EventEmitter<null> = new EventEmitter()
  /* 是否显示close图标 */
  @Input() showCloseIcon: boolean = true
  /* 是否显示下划线 */
  @Input() showBorder: boolean = false
  /* 固定name宽度 */
  @Input() titleNameWidth: number
  /* 固定action容器宽度 */
  @Input() actionContainerWidth: number
  /* action容器右margin边距 */
  @Input() actionContainerTranslateX: number = -8
}
